
import { useState } from "react";
import CustomDropdown from "../../../../../components/pc/Dropdown";
import "./index.less";
import { fetchCurrentWarningList } from "@/api/hap";
import { LoadingOutlined } from "@ant-design/icons";
import { Pagination, Spin } from "antd";
import NoData from "@/components/pc/NoData";

interface CurrentWarningCardProps {
  title?: string;
  collapsed?: boolean;
  // 下拉框选项
  dropdownOptions?: Array<{ label: string; value: string }>;
  // 下拉框选择回调
  onDropdownChange?: (value: string) => void;
  // 默认选中值
  defaultDropdownValue?: any;
}

interface WarningItem {
  incidentOneClass: string;
  id: string;
  serial: number;
  incidentStatus: string;
  incidentAddress: string;
  receiveTime: string;
}

const rangeFilterMap = {
  week: {
    controlId: "receiveTime",
    dataType: 16,
    dateRange: 21,
    filterType: 37,
    spliceType: 1,
  },
  month: {
    controlId: "receiveTime",
    dataType: 16,
    dateRange: 23,
    filterType: 37,
    spliceType: 1,
  },
  season: {
    controlId: "receiveTime",
    dataType: 16,
    dateRange: 101,
    dateRangeType: 11,
    filterType: 37,
    spliceType: 1,
    value: "1",
    values: ["today"],
  },
  year: {
    controlId: "receiveTime",
    dataType: 16,
    spliceType: 1,
    filterType: 37,
    dateRange: 101,
    dateRangeType: 5,
    value: "1",
    values: ["today"],
  },
};

/**
 * 首页：当前告警信息
 */
const CurrentWarningCard: React.FC<CurrentWarningCardProps> = ({ title = "当前告警信息", collapsed = false, dropdownOptions = [] }) => {
  const [isCollapsed, setIsCollapsed] = useState(collapsed);
  const [selectedRange, setSelectedRange] = useState<string>("week");
  const [warningList, setWarningList] = useState<WarningItem[]>([]);
  const [totalCount, setTotalCount] = useState<number>(0);
  const [pageIndex, setPageIndex] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    loadWarningList();
  }, [selectedRange, pageIndex]);

  const loadWarningList = async () => {
    setLoading(true);
    const data = await fetchCurrentWarningList([rangeFilterMap[selectedRange as keyof typeof rangeFilterMap]], pageIndex);
    setWarningList(data.rows);
    setTotalCount(data.total);
    setLoading(false);
  };

  // 切换折叠状态
  const toggleCollapse = () => {
    setIsCollapsed(!isCollapsed);
  };

  // 处理下拉框变化
  const handleDropdownChange = (value: string) => {
    setSelectedRange(value);
  };

  return (
    <div className={`current-warning-card ${isCollapsed ? "collapsed" : ""}`}>
      <div className="card-header">
        <div className="panel-icon" />

        <div className="header-content">
          <div className="card-title">{title}</div>
          <div className="dropdown-container">
            <CustomDropdown
              options={
                dropdownOptions.length > 0
                  ? dropdownOptions
                  : [
                    { label: "近一周", value: "week" },
                    { label: "近一月", value: "month" },
                    { label: "近三月", value: "season" },
                    { label: "近一年", value: "year" },
                  ]
              }
              onChange={handleDropdownChange}
              value={selectedRange || "week"}
              className="warning-dropdown"
              placeholder="请选择"
            />
          </div>
        </div>

        <span className={`collapse-btn ${isCollapsed ? "collapsed" : ""}`} onClick={toggleCollapse}>
          <div className="collapse-icon" />
        </span>
      </div>

      {!isCollapsed && (
        <div className="card-content">
          {
            !loading && warningList.length === 0 ? (
              <NoData />
            ) : (
              <>
                <div className="list-body">
                  {warningList.map((item, index) => (
                    <div key={item.id} className="list-item">
                      <div className="list-col serial-col">{(pageIndex ? pageIndex - 1 : 0) * 50 + index + 1}</div>
                      <div className="list-col category-col">{item.incidentOneClass}</div>
                      <div className="list-col address-col">{item.incidentAddress}</div>
                      <div className="list-col time-col">{item.receiveTime}</div>
                    </div>
                  ))}
                </div>
                <div className="list-footer">
                  <Pagination
                    simple={{ readOnly: true }}
                    showSizeChanger={false}
                    showTotal={total => `共 ${total} 条`}
                    defaultCurrent={0}
                    total={totalCount}
                    pageSize={50}
                    onChange={setPageIndex}
                  />
                </div>
              </>
            )
          }
          <div className={`loading-container ${loading ? "" : "hidden"}`}>
            <Spin spinning={loading} indicator={<LoadingOutlined className="loading-icon" spin />} />
          </div>
        </div>
      )}
    </div>
  );
};

export default CurrentWarningCard;
